<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>

<style type="text/css">
	#lan{
		background-color:white ;
	}
	#lan ul li{
		padding: 35px;
		line-height:20px;
		list-style: none;
	}
#button1 {
	position: absolute;
	
	left: 200px;
	width: 80px;
	bottom: 20px;
}
#button2 {
	position: absolute;
	left: 200px;
	width: 80px;
	bottom: 20px;
}
.roleCodes {
	border: 0;
	width: 50px;
	background-color: transparent;
}
.role {
	border: 0;
	width: 50px;
	background-color: transparent;
}
.go-back {
	text-align: center;
	border-top: 1px dashed #ccc;
	padding: 10px;
	margin-top: 20px;
	font-size: 40px;
}

.black_overlay {
	position: fixed;
	z-index: 1000;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	filter: alpha(opacity = 80);
	opacity: 0.8;
	overflow: hidden;
	background-color: #000;
}

.white_content {
	display: none;
	position: absolute;
	top: 15%;
	left: 20%;
	width: 500px;
	height: 600px;
	border-radius: 10px;
	border: 16px solid #FFF;
	border-bottom: none;
	background-color: white;
	z-index: 1002;
	overflow: auto;
}

#light a {
	float: right;
}
#light1 a {
	float: right;
}
#tiao {
	margin-left: 500px;
}

#example {
	width: 1100px;
	float: right;
	margin-top: 200px;
	margin-right: 100px;
}

#cuanjian {
	top: 150px;
	position: absolute;
	margin-left: 100px;
}

#box {
	position: absolute;
	width: 100%;
	background-color: #FFFAFA;
	border: 1px solid #D1D1D1;
	height: 742px;
}

#da {
	position: absolute;
	top: 30px;
	right: 0px;
	width: 1300px;
	border: 1px solid #D1D1D1;
	background-color: white;
}

h1 {
	position: absolute;
	left: 100px;
	height: 40x;
}

#chaxun {
	position: absolute;
	width: 1100px;
	top: 20px;
	left: 100px;
	float: right;
	height: 40px;
	border: #000000 1px solid;
}

.wrapper {
	
}

#td {
	margin-top: -25px;
	margin-left: 230px;
}
.panel-heading{
  height: 39px;
}
#tiao a {
	width: 40px;
	height: 40px;
	display: block;
	float: left;
	text-decoration: none;
}

#sx a {
	width: 74px;
	height: 40px;
	display: block;
}
</style>
</head>
<script type="text/javascript">
	//页面获取数据
	var y = document.getElementById("y").value;
	function fun2() {
		refurbishIndex(1);
	};
	$(function() {
		refurbishIndex();
		
	});
	function moren(){
		cha(1);
	}
	function refurbishIndex(num) {
		$.ajax({
					type : "get",
					url : "/list5",
					data : {
						'y' : num
		
					},
					async : false,
					success : function(data) {
						var str = "";
						for (i in data) {

							str += "<tr>"
									+ "<td>"
									+"<input type= 'text' onfocus='this.blur()' class='role' value="
									+ data[i].id
									+">"
									+ "</td>"
									+ "<td>"
									+"<input type= 'text' onfocus='this.blur()' class='role' value="
									+ data[i].m_name
									+">"
									+ "</td>"
									+ "<td>"
									+"<input type= 'text' onfocus='this.blur()' class='role' value="
									+ data[i].m_type
									+">"
									+ "</td>"
									+ "<td>"
									+"<input type= 'text' onfocus='this.blur()' class='role' value="
									+ data[i].m_symptom
									+">"
									+ "</td>"
									+ "<td>"
									+"<input type= 'text' onfocus='this.blur()' class='role' value="
									+ data[i].m_grade
									+">"
									+ "</td>"
									+ "<td>"
									+ "<input type= 'text' onfocus='this.blur()' class='roleCodes' value="
									+ data[i].m_phone
									+ ">"
									+ "</td>"
									+ "<td>"
									+ "<input type= 'text' onfocus='this.blur()' class='roleCodes' value="
									+ data[i].m_sex
									+ ">"
									+ "</td>"
									+ "<td>"
									+ "<input type= 'text' onfocus='this.blur()' class='roleCodes' value="
									+ data[i].dateOfOnSet
									+ ">"
									+ "</td>"
									+ "<td>"
									+ data[i].dateOfConsultation
									+ "</td>"
									+ "<td>"
									+ "<button data-id='data[i].id' class='btn btn-danger btn-sm' onclick='del(this);delet(this)'>删除</button>"
									+ " "
									+ "<button class='btn btn-primary btn-sm'onClick='geng(this)' >更改</button>"
									+ "</td>"
							"</tr>";

						}
						document.getElementById("shuju").innerHTML = str;
					}
				});
	}
	function del(nowTr) {
		$(nowTr).parent().parent().remove();
	};
	//删除功能
	function delet(y) {
		var roleCode = $(y).parents("tr").find(".role").val()
		var t = parseInt(roleCode);
		
		$.ajax({
			type : "get",
			url : "/mdel",
			data : {
				'id' : t
			},
			traditional : true,
			async : false,
			success : function(result) {
			},
			error : function(result) {
			}
		});
	}
	//模糊查询
	function cha(num) {
         var  m_grade=$("#nm").val();
		 var m_name=$("#bh").val();
		$.ajax({
					type : "get",
					url : "/mlist",
					data : {
						'y' : num,
						'm_name':m_name,
						'm_grade':m_grade
					},
					async : false,
					success : function(data) {
						var str = "";
						for (i in data) {

							str += "<tr>"
								+ "<td>"
								+"<input type= 'text' onfocus='this.blur()' class='role' value="
								+ data[i].id
								+">"
								+ "</td>"
								+ "<td>"
								+"<input type= 'text' onfocus='this.blur()' class='role' value="
								+ data[i].m_name
								+">"
								+ "</td>"
								+ "<td>"
								+"<input type= 'text' onfocus='this.blur()' class='role' value="
								+ data[i].m_type
								+">"
								+ "</td>"
								+ "<td>"
								+"<input type= 'text' onfocus='this.blur()' class='role' value="
								+ data[i].m_symptom
								+">"
								+ "</td>"
								+ "<td>"
								+"<input type= 'text' onfocus='this.blur()' class='role' value="
								+ data[i].m_grade
								+">"
								+ "</td>"
								+ "<td>"
								+ "<input type= 'text' onfocus='this.blur()' class='roleCodes' value="
								+ data[i].m_phone
								+ ">"
								+ "</td>"
								+ "<td>"
								+ "<input type= 'text' onfocus='this.blur()' class='roleCodes' value="
								+ data[i].m_sex
								+ ">"
								+ "</td>"
								+ "<td>"
								+ "<input type= 'text' onfocus='this.blur()' class='roleCodes' value="
								+ data[i].dateOfOnSet
								+ ">"
								+ "</td>"
								+ "<td>"
								+ data[i].dateOfConsultation
								+ "</td>"
								+ "<td>"
									+ "<button data-id='data[i].id' class='btn btn-danger btn-sm' onclick='del(this);delet(this)'>删除</button>"
									+ " "
									+ "<button class='btn btn-primary btn-sm'onClick='geng(this)' >更改</button>"
									+ "</td>"
							"</tr>";

						}
						document.getElementById("shuju").innerHTML = str;
					}
				});
	}
	//点击按钮刷新页面

	//
	function baocun() {
		location.reload();
	}
	//更改
	function geng(o) {
		var roleCode = $(o).parents("tr").find(".role").val()
		var t = parseInt(roleCode);
		var element = document.getElementById("id");
		element.value = t;
		document.getElementById('light1').style.display = 'block';
		document.getElementById('fade1').style.display = 'block';
	}
	//修改
	function update() {
		var id=$("input[name='id']").val();
	    var m_name=$("input[name='m_name']").val();
	    var m_type=$("input[name='m_type']").val();
	    var m_symptom=$("input[name='m_symptom']").val();
	    var m_grade=$("input[name='m_grade']").val();
	    var m_phone=$("input[name='m_phone']").val();
	    var m_sex=$("input[name='m_sex']").val();
	    var dateOfOnSet=$("input[name='dateOfOnSet']").val();
	    var dateOfConsultation=$("input[name='dateOfConsultation']").val();
	     
	    $.ajax({
	        url:'/mupdate/',
	        type:"put",
	        async:false,
	        data:{},
	        success:function(data){ 
	        },
	        error:function (data) {
	            alert("修改失败");
	        }
	    });
	};
</script>
<body>
	ok!
	<a href="/ssm/login">返回</a>
	<div id="box">
		<div id="lan">
			<ul>
				<li><a href="/ssm/index">用户管理页面</a></li>
				
				<li><a href="../doctor">医生管理页面</a></li>
				<li><a href="../drug">药品管理页面</a></li>
				<li><a href="../prescription">处方管理页面</a></li>
				<li><a href="../medical">电子病历管理页面</a></li>
				<li><a href="../yuguanli">预约管理页面</a></li>
			</ul>
			
		</div>
		<div id="da">
			<div id="chaxun">
			<div class="panel panel-primary">
			<div class="panel-heading">
                <h1 class="panel-title">客户管理</h1>
            </div>
              <div class="panel-body form-inline">
              <label>
			    姓名:<input class="form-control" type="text" id="bh" />
			    班级: <input class="form-control" type="text" id="nm" />
			<button id="button" onclick="moren();cha()"class="btn btn-primary btn-sm">查询</button> 
			</div>
			</div>
			</div>
			<div class="wrapper">
				<button id="cuanjian" class="btn btn-primary"
					onClick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">创建</button>
				<div id="light" class="white_content">
					<a href="javascript:void(0)"
						onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">关闭</a>
					<form action="./msave">
						姓名: <input type="text" id="m_name" name="m_name"
							class="form-control" /> 
							发病类型: <input type="text" id="m_type" name="m_type"
							class="form-control" /> 
							症状: <input type="text" id="m_symptom" name="m_symptom"
							class="form-control" /> 
							班级: <input type="text" id="m_grade" name="m_grade"
							class="form-control" /> 
							联系电话	: <input type="text" id="m_phone" name="m_phone"
							class="form-control" /> 
							性别: <input type="text" id="m_sex" name="m_sex"
							class="form-control" /> 
						发病时间: <input type="date" id="dateOfOnSet" name="dateOfOnSet"
							class="form-control" /> 
							就诊日期: <input type="date" id="dateOfConsultation" name="dateOfConsultation"
							class="form-control" /> 
							
							
						<button id="button1" class="btn btn-primary btn-sm">保存</button>
					</form>
				</div>
				<div id="fade" class="black_overlay" style="display: none;"></div>
			</div>
			<!-- 更改 -->
			<div class="wrapper">
				<div id="light1" class="white_content">
					<a href="javascript:void(0)"
						onclick="document.getElementById('light1').style.display='none';document.getElementById('fade1').style.display='none'">关闭</a>
					 <form action="./mupdate">
					       id:<input type="text" onfocus="this.blur()" class="form-control" id="id" name="id"/>
						姓名: <input type="text" id="m_name" name="m_name"
							class="form-control" /> 
							发病类型: <input type="text" id="m_type" name="m_type"
							class="form-control" /> 
							症状: <input type="text" id="m_symptom" name="m_symptom"
							class="form-control" /> 
							班级: <input type="text" id="m_grade" name="m_grade"
							class="form-control" /> 
							联系电话	: <input type="text" id="m_phone" name="m_phone"
							class="form-control" /> 
							性别: <input type="text" id="m_sex" name="m_sex"
							class="form-control" /> 
						发病时间: <input type="date" id="dateOfOnSet" name="dateOfOnSet"
							class="form-control" /> 
							就诊日期: <input type="date" id="dateOfConsultation" name="dateOfConsultation"
							class="form-control" /> 
							
						<button id="button2" class="btn btn-primary btn-sm">保存</button>
					</form>
				</div>
				<div id="fade1" class="black_overlay" style="display: none;"></div>
			</div>
			<!-- 用户数据获取 -->
			<table id="example" class="table table-striped" data-role="none">
				<thead>
					<tr>
						<th>Id</th>
						<th>姓名</th>
						<th>发病类型</th>
						<th>症状</th>
						<th>班级</th>
						<th>联系电话</th>
						<th>性别</th>
						<th>发病时间</th>
						<th>就诊日期</th>
						<th>Operation</th>
					</tr>
				</thead>
				<tbody id="shuju">

				</tbody>
			</table>
			<div id="tiao">
				<input placeholder="页数" id="y" type="number" min="1" max="10"
					value="1" />
				<button class="btn btn-primary btn-sm" onclick="fun()">跳转</button>
				<div id="td">
				<ul id="r" >
				  </ul>
				</div>
				<div id="sx">
					<a href="#" class='page-link' onclick="shang()">上一页</a> <a href="#"
						class='page-link' onclick="xia()">下一页</a>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
<script>
	fun2();
	function fun() {
		var y = document.getElementById("y").value;
		var y = parseInt(y);
		refurbishIndex(y)
		cha(y)
	}
	function xia() {
		var y = document.getElementById("y").value;
		var y = parseInt(y);
		if (y < 5) {
			var x = ++y;
			refurbishIndex(x);
			cha(x);
			var element = document.getElementById("y");
			element.value = x;
		}
	}

	function shang() {
		var y = document.getElementById("y").value;
		var y = parseInt(y);
		if (y >= 2) {
			var x = --y;
			refurbishIndex(x);
			cha(x);
			var element = document.getElementById("y");
			element.value = x;
		}
	}
	var str = "";
	for (var i = 1; i <= 5; i++) {
		str += "<a class='page-link' href='javascript:changeText(" + i
				+ ")' onclick='refurbishIndex(" + i + ");cha(" + i + ")'>" + i + "</a>";
	}
	document.getElementById("r").innerHTML = str;

	function changeText(text) {
		var element = document.getElementById("y");
		element.value = text;
	}
</script>
